<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/AdminLTE.css">
<link rel="stylesheet" href="css/admin.css">
<title>摇一摇</title>


<style>
.shake-img{
  width: 128px;
  height: 128px;
}
</style>
<section class="content-header">
<h1>
    摇一摇
</h1>
<ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-home"></i>首页</a></li>
    <li class="active">摇一摇</li>
</ol>
</section>

<style type="text/css">

</style>
<div class="m-container">

<div class="m-container">
    <div class="row">
        <div class="col-md-12">
            <!-- start box -->
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">摇一摇设置</h3>
                </div>
                <div class="box-body ">
                    <!-- start tabs -->
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                          <li class=""><a href="#tab_1" data-toggle="tab" aria-expanded="true">开通说明</a></li>
                          <li class="active"><a href="#tab_2" data-toggle="tab" aria-expanded="false">基本设置</a></li>
                          <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">奖品设置</a></li>
                        </ul>

<!-- start tab-content -->
<div class="tab-content" style="min-height: 300px;">
    <div class="tab-pane" id="tab_1">
        <div style="padding: 20px;text-align: center;">
            <div style="border:solid 1px #f4f4f4;padding: 20px;border-radius: 3px;display: inline-block;">
            <p>客人现场摇手机，大屏实时显示排名，并有多种有趣的弹幕信息，立刻提升活跃现场气氛。</p>
            <p>
            <span class="status on">
                <i class="point"></i>
                开启
            </span>
            </p>
            <button class="btn btn-info">关闭功能</button>
            </div>
        </div>
    </div>



    <div class="tab-pane active" id="tab_2">
        <div class="config-group stripe">
            <div class="config-group-item">
                <div class="item-key">
                    <strong>更新二维码</strong>
                </div>
                <div class="item-value">
                    <button class="btn btn-info">更新二维码</button>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>摇一摇标题</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="摇一摇标题">
                    <p class="item-info">请填写3-16个字的活动标题</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>活动主题</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="活动标题">
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>每场时间</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="设置每场要摇一摇时间">
                </div>
            </div>
            
            <div class="config-group-item">
                <div class="item-key">
                    
                </div>
                <div class="item-value">
                    <button class="btn btn-success">提交修改</button>
                </div>
            </div>
        </div>
    </div>


    <!-- tab_3 -->
    <div class="tab-pane" id="tab_3">
        <div class="config-group stripe">
            <div class="config-group-item">
                <div class="item-key">
                    <strong>一等奖奖品名称</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="输入奖品名称">
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>一等奖奖品图片</strong>
                </div>
                <div class="item-value">
                    <img src="img/photo3.jpg" alt="" class="shake-img">
                    <p class="item-info">建议尺寸 320像素 x 320像素</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>二等奖奖品名称</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="输入奖品名称">
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>二等奖奖品图片</strong>
                </div>
                <div class="item-value">
                    <img src="img/photo3.jpg" alt="" class="shake-img">
                    <p class="item-info">建议尺寸 320像素 x 320像素</p>
                </div>
            </div>
            

            <div class="config-group-item">
                <div class="item-key">
                    <strong>三等奖奖品名称</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="输入奖品名称">
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>三等奖奖品图片</strong>
                </div>
                <div class="item-value">
                    <img src="img/photo3.jpg" alt="" class="shake-img">
                    <p class="item-info">建议尺寸 320像素 x 320像素</p>
                </div>
            </div>
            
            <div class="config-group-item">
                <div class="item-key">
                    
                </div>
                <div class="item-value">
                    <button class="btn btn-success">提交修改</button>
                </div>
            </div>
        </div>
        
    </div>
    




</div>
<!-- end tab-content -->

                    </div>
                    <!-- end tabs -->
                </div>
            </div>
            <!-- end box -->
        </div>
    </div>
</div>

</div>
<script src="js/jquery-2.2.3.min.js"></script>

<script src="../js/bootstrap.min.js"></script>
